<template>
  <div class="grid">
    <div v-if="title"
         class="grid-head"
         @click="toggle">
      <strong class="grid__title">{{ title }}</strong>
      <slot name="right"></slot>
    </div>
    <transition name="fade">
      <div class="grid__body"
           v-if="collapse">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'grid',
  props: {
    title: String,
    collapse: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    toggle () {
      this.$emit('toggle')
    }
  }
}
</script>
<style lang="scss" scoped>
.grid {
  margin: 10px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  &-head {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    padding: 10px;
    justify-content: space-between;
  }
  &__title {
    font-size: 16px;
    padding-left: 10px;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 2px;
      width: 100%;
      height: 20px;
      border-left: 2px solid #88b7e0;
    }
  }
  &__body {
    padding: 10px;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter,
  .fade-leave-to {
    transform: translateY(10px);
    opacity: 0;
  }
}
</style>
